﻿<form role="form" id="roster-editor" name="editRosterForm" unsaved-warning-form ng-show="activeRoster">
    <div class="form-holder">
        <div class="breadcrumbs-container">
            <div data-item-breadcrumbs data-crumbs="activeRoster.breadcrumbs"></div>
        </div>
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="edit-group-title" class="wb-label" ng-i18next="RosterSource"></label><br>
                <div class="btn-group type-container-dropdown" uib-dropdown>
                    <button id="rosterTypeBtn" class="btn btn-default dropdown-toggle form-control" uib-dropdown-toggle type="button">
                        {{activeRoster.getTitleForRosterType()}}
                        <span class="dropdown-arrow"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="rosterTypeBtn">
                        <li role="presentation" ng-repeat="type in activeRoster.rosterTypeOptions">
                            <a role="menuitem" tabindex="-1" ng-click="updateRosterType(type.value)">{{type.text}}</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="form-group input-variable-name col-xs-5 pull-right">
                <label for="edit-group-variableName" class="wb-label">{{'RosterVariableName' | i18next}} <help key="variableName" placement="left" /></label><br>
                <input id="edit-group-variableName" type="text" class="wb-input bg-white width-auto" ng-model="activeRoster.variableName" maxlength="32" spellcheck="false">
            </div>
        </div>

        <div class="form-group">
            <label for="edit-roster-title-highlight" class="wb-label" ng-i18next="RosterName"></label>

            <br/>
            <div class="pseudo-form-control">
                <div id="edit-roster-title-highlight"
                     ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="activeRoster.title"></div>
            </div>
            <div class="roster-type-specific-block" ng-include="activeRoster.type + '-template.html'" ng-if="activeRoster.type != undefined">
            </div>
        </div>
        
        <div class="form-group">
            <label for="cb-roster-display-mode">{{'RosterDisplayMode' | i18next }}&nbsp;</label>

            <div class="btn-group dropup " uib-dropdown>
                <button class="btn dropdown-toggle" id="cb-roster-display-mode" uib-dropdown-toggle type="button">
                    {{ 'RosterDisplayMode_' + activeRoster.displayMode | i18next }}
                    <span class="dropdown-arrow"></span>
                </button>

                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="cb-roster-display-mode">
                    <li role="presentation" ng-repeat="displayMode in activeRoster.displayModes">
                        <a role="menuitem" tabindex="-1" ng-click="changeDisplayMode(displayMode)">
                            {{ 'RosterDisplayMode_' + displayMode | i18next }}
                        </a>
                    </li>
                </ul>
            </div>

            <label><help key="rosterDisplayMode" /></label>
        </div>

        <div class="form-group" ng-show="(!((showEnablingConditions===undefined && activeRoster.enablementCondition) || showEnablingConditions))">
            <button type="button" class="btn btn-lg btn-link" ng-click="showEnablingConditions=true" ng-i18next="AddEnablingCondition"></button>
        </div>

        <div class="row" ng-show="(((showEnablingConditions===undefined && activeRoster.enablementCondition) || showEnablingConditions))">
          <div class="form-group col-xs-11">
            <div class="enabling-group-marker" ng-class="{'hide-if-disabled': activeRoster.hideIfDisabled}"></div>
            <label for="edit-group-condition">{{'EnablingCondition' | i18next}} <help key="conditionExpression"/></label>

            <input type="checkbox" class="wb-checkbox" disabled="disabled" checked="checked" ng-if="questionnaire.hideIfDisabled"
                   title="{{ 'HideIfDisabledNested' | i18next }}" />

            <input id="cb-hideIfDisabled" type="checkbox" class="wb-checkbox" ng-model="activeRoster.hideIfDisabled" ng-if="!questionnaire.hideIfDisabled"/>
            <label for="cb-hideIfDisabled"><span title="{{questionnaire.hideIfDisabled ? ('HideIfDisabledNested' | i18next) : ''}}"></span>{{'HideIfDisabled'| i18next}} <help key="hideIfDisabled" /></label>
            <br>
            <div class="pseudo-form-control">
                <div id="edit-group-condition" ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }" ng-model="activeRoster.enablementCondition"></div>
            </div>
          </div>
            <div class="form-group col-xs-1">
                <button type="button" class="btn cross instructions-cross"
                        ng-click="showEnablingConditions=false;activeRoster.enablementCondition='';activeRoster.hideIfDisabled=false;editRosterForm.$setDirty();"></button>
            </div>
            
        </div>
    </div>

    <div class="form-buttons-holder">
        <div class="pull-left">
            <button type="submit" ng-show="!questionnaire.isReadOnlyForUser" id="edit-roster-save-button" class="btn btn-lg" ng-class="{ 'btn-primary': editRosterForm.$dirty }" ng-click="saveRoster()" unsaved-warning-clear ng-disabled="!editRosterForm.$valid" ng-i18next>Save</button>
            <button type="reset" id="edit-chapter-cancel-button" class="btn btn-lg btn-link" unsaved-warning-clear ng-click="cancelRoster()" ng-i18next>Cancel</button>
        </div>
        <div class="pull-right">
            <button type="button" ng-show="!questionnaire.isReadOnlyForUser" id="add-comment-button" class="btn btn-lg btn-link" ng-click="toggleComments(activeQuestion)" unsaved-warning-clear>
                <span ng-i18next ng-show="!isCommentsBlockVisible && commentsCount == 0">EditorAddComment</span>
                <span ng-show="!isCommentsBlockVisible && commentsCount > 0">{{'EditorShowComments' | i18next: { count: commentsCount } }}</span>
                <span ng-i18next ng-show="isCommentsBlockVisible">EditorHideComment</span>
            </button>
            <button type="button" ng-show="!questionnaire.isReadOnlyForUser" id="edit-chapter-delete-button" class="btn btn-lg btn-link" unsaved-warning-clear ng-click="deleteRoster()" unsaved-warning-clear ng-i18next>Delete</button>
            <ng-include src="'moveToChapterSnippet'" ng-show="!questionnaire.isReadOnlyForUser"/>
        </div>
    </div>

<script type="text/ng-template" id="List-template.html">

        <div class="dropdown-with-breadcrumbs-and-icons">
            <label>{{'RosterSourceQuestion' | i18next}} </label>
            <div class="btn-group" uib-dropdown>
                <button class="btn dropdown-toggle" uib-dropdown-toggle type="button">
                    <span class="select-placeholder" ng-if="selectedListQuestion == null">{{ 'SelectQuestion' | i18next}}</span>
                    <span class="selected-item" ng-if="selectedListQuestion !== null">
                        <span class="path">{{selectedListQuestion.breadcrumbs}}</span>
                        <span class="chosen-item">
                            <i class="dropdown-icon" ng-class="'icon-'+selectedListQuestion.type"></i>{{selectedListQuestion.title | escape}}
                            (<span class="var-name-line">{{selectedListQuestion.varName}}</span>)
                        </span>
                    </span>
                    <span class="dropdown-arrow"></span>
                </button>

                <ul class="dropdown-menu" role="menu">
                    <li role="presentation" ng-class="{'dropdown-header': breadCrumb.isSectionPlaceHolder}" ng-repeat="breadCrumb in activeRoster.lists">
                        <span ng-if="breadCrumb.isSectionPlaceHolder">{{breadCrumb.title}}</span>

                        <a ng-if="!breadCrumb.isSectionPlaceHolder"
                           ng-click="selectListQuestion(breadCrumb.id)"
                           role="menuitem"
                           tabindex="-1"
                           href="javascript:void(0);">
                            <div>
                                <i class="dropdown-icon icon-{{breadCrumb.type}}"></i>
                                <span ng-bind-html="breadCrumb.title | escape"></span>
                            </div>
                            <div class="var-block">
                                <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </script>

<script type="text/ng-template" id="Numeric-template.html">

        <div class="dropdown-with-breadcrumbs-and-icons">
            <label ng-i18next="RosterSourceNumericQuestion"></label>
            <div class="btn-group" uib-dropdown>
                <button class="btn dropdown-toggle" uib-dropdown-toggle type="button">
                    <span class="select-placeholder" ng-if="selectedNumericQuestion == null">{{'SelectQuestion'|i18next}}</span>
                    <span class="selected-item" ng-if="selectedNumericQuestion !== null">
                        <span class="path">{{selectedNumericQuestion.breadcrumbs}}</span>
                        <span class="chosen-item"><i class="dropdown-icon" ng-class="'icon-'+selectedNumericQuestion.type"></i>{{selectedNumericQuestion.title | escape}}
                            (<span class="var-name-line">{{selectedNumericQuestion.varName}}</span>)
                        </span>
                    </span>
                    <span class="dropdown-arrow"></span>
                </button>

                <ul class="dropdown-menu" role="menu">
                    <li role="presentation" ng-class="{'dropdown-header': breadCrumb.isSectionPlaceHolder}" ng-repeat="breadCrumb in activeRoster.numerics">
                        <span ng-if="breadCrumb.isSectionPlaceHolder">{{breadCrumb.title}}</span>

                        <a ng-if="!breadCrumb.isSectionPlaceHolder"
                           ng-click="selectNumericQuestion(breadCrumb.id)"
                           role="menuitem"
                           tabindex="-1"
                           href="javascript:void(0);">
                            <div>
                                <i class="dropdown-icon icon-{{breadCrumb.type}}"></i>
                                <span ng-bind-html="breadCrumb.title | escape"></span>
                            </div>
                            <div class="var-block">
                                <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="dropdown-with-breadcrumbs-and-icons">
            <label ng-i18next="RosterSourceNumericTitles"></label>
            <div class="btn-group" uib-dropdown>
                <button class="btn dropdown-toggle" uib-dropdown-toggle type="button">
                    <span class="select-placeholder" ng-if="selectedTitleQuestion == null" ng-i18next="SelectQuestion"></span>
                    <span class="selected-item" ng-if="selectedTitleQuestion !== null">
                        <span class="path">{{selectedTitleQuestion.breadcrumbs}}</span>
                        <span class="chosen-item"><i class="dropdown-icon" ng-class="'icon-'+selectedTitleQuestion.type"></i>{{selectedTitleQuestion.title | escape}}
                            (<span class="var-name-line">{{selectedTitleQuestion.varName}}</span>)
                        </span>
                    </span>
                    <span class="dropdown-arrow"></span>
                </button>

                <ul class="dropdown-menu" role="menu">
                    <li role="presentation" ng-class="{'dropdown-header': breadCrumb.isSectionPlaceHolder}" ng-repeat="breadCrumb in activeRoster.titles">
                        <span ng-if="breadCrumb.isSectionPlaceHolder">{{breadCrumb.title}}</span>

                        <a ng-if="!breadCrumb.isSectionPlaceHolder"
                           ng-click="selectTitleQuestion(breadCrumb.id)"
                           role="menuitem"
                           tabindex="-1"
                           href="javascript:void(0);">
                            <div>
                                <i class="dropdown-icon icon-{{breadCrumb.type}}"></i>
                                <span ng-bind-html="breadCrumb.title | escape"></span>
                            </div>
                            <div class="var-block">
                                <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </script>

<script type="text/ng-template" id="Fixed-template.html">

    <div class="form-group">
        <label for="edit-fixed-roster-title" class="wb-label">{{'RosterSourceFixed' | i18next}} <help key="fixedTitles" /></label>
        <!--<textarea id="edit-fixed-roster-title" class="form-control" ng-model="activeRoster.fixedRosterTitles" msd-elastic split-array></textarea>-->
        <div class="options-editor">
            <div ng-if="activeRoster.useListAsRosterTitleEditor" class="form-group">
                <div class="table-holder">
                    <div class="table-row fixed-roster-titles-editor" ng-repeat="title in activeRoster.fixedRosterTitles">
                        <div class="column-2">
                            <input type="number" min="-2147483648" max="2147483647" ng-model="title.value" name="title_value_{{$index}}" ng-pattern="/^([-+]?\d+)$/"
                                   ng-class="{'has-error': !editRosterForm.title_value_{{$index}}.$valid}" ng-keypress="onKeyPressInOptions($event)" class="form-control fixed-roster-value-editor border-right">
                        </div>
                        <div class="column-3">
                            <input ng-attr-id="{{'fixed-item-' + $index}}" type="text" ng-model="title.title" ng-keypress="onKeyPressInOptions($event)" class="form-control border-right">
                        </div>
                        <div class="column-4">
                            <a href class="btn" tabindex="-1" ng:click="removeFixedTitle($index)"></a>
                        </div>
                    </div>
                </div>
                <p>
                    <button class="btn btn-link" ng-hide="wasTitlesLimitReached()" ng-click="addFixedTitle()" ng-i18next="RosterAddItem"></button>
                    <button class="btn btn-link pull-right" ng-click="showOptionsInTextarea()" ng-i18next="StringsView"></button>
                </p>
            </div>
            <div ng-if="!activeRoster.useListAsRosterTitleEditor">
                <div class="form-group" ng-class="{'has-error': !editRosterForm.stringifiedRosterTitles.$valid}">
                    <textarea name="stringifiedRosterTitles"
                              class="form-control mono"
                              ng-model="activeRoster.stringifiedRosterTitles"
                              match-options-pattern
                              max-options-count
                              msd-elastic></textarea>
                    <p class="help-block">
                        <input class="btn btn-link" type="button" ng-i18next="[value]ShowList" ng-click="showRosterTitlesInList()" ng-disabled="!editRosterForm.stringifiedRosterTitles.$valid" />
                    </p>
                    <p class="help-block ng-cloak" ng-show="editRosterForm.stringifiedRosterTitles.$error.matchOptionsPattern" ng-i18next="OptionsListError">
                    </p>
                    <p class="help-block ng-cloak" ng-show="editRosterForm.stringifiedRosterTitles.$error.maxOptionsCount"
                       ng-i18next="({max: 200})EnteredMoreThanAllowed">
                    </p>
                </div>
            </div>
        </div>
    </div>

</script>

<script type="text/ng-template" id="Multi-template.html">

        <div class="dropdown-with-breadcrumbs-and-icons">
            <label ng-i18next="RosterSourceQuestion"></label>
            <div class="btn-group" uib-dropdown>
                <button class="btn dropdown-toggle" uib-dropdown-toggle type="button">
                    <span class="select-placeholder" ng-if="selectedMultiQuestion == null" ng-i18next="SelectQuestion"></span>
                    <span class="selected-item" ng-if="selectedMultiQuestion !== null">
                        <span class="path">{{selectedMultiQuestion.breadcrumbs}}</span>
                        <span class="chosen-item"><i class="dropdown-icon" ng-class="'icon-'+selectedMultiQuestion.type"></i>{{selectedMultiQuestion.title | escape}}
                            (<span class="var-name-line">{{selectedMultiQuestion.varName}}</span>)
                        </span>
                    </span>
                    <span class="dropdown-arrow"></span>
                </button>

                <ul class="dropdown-menu" role="menu">
                    <li role="presentation" ng-class="{'dropdown-header': breadCrumb.isSectionPlaceHolder}" ng-repeat="breadCrumb in activeRoster.multiOption">
                        <span ng-if="breadCrumb.isSectionPlaceHolder">{{breadCrumb.title}}</span>

                        <a ng-if="!breadCrumb.isSectionPlaceHolder"
                           ng-click="selectMultiQuestion(breadCrumb.id)"
                           role="menuitem"
                           tabindex="-1"
                           href="javascript:void(0);">
                            <div>
                                <i class="dropdown-icon icon-{{breadCrumb.type}}"></i>
                                <span ng-bind-html="breadCrumb.title | escape"></span>
                            </div>
                            <div class="var-block">
                                <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </script>
</form>
